import { CockpitChartBaseProps, angleText } from "../helps";
import React, { useState } from "react";

export interface ProjectProportionPieChartProps extends CockpitChartBaseProps {
  activeDataIndex?: number;
}
import ReactECharts from "echarts-for-react";
import type { EChartsOption } from "echarts";

export const getProjectProportionPieChartOption = ({
  dataSource = [],
  activeDataIndex = 0,
}: ProjectProportionPieChartProps): EChartsOption => {
  const dataSourceFormat = dataSource.map((d) => ({
    ...d,
    label: {
      color: "#fff",
    },
    itemStyle: {},
  }));
  return {
    grid: {},
    angleAxis: {
      show: false,

      type: "category",
      data: [],
    },
    //中间画圈圈的坐标轴
    radiusAxis: {
      show: false,
    },

    tooltip: {
      show: false,
    },
    legend: {
      show: false,
    },
    toolbox: {
      show: false,
    },
    series: [
      // 文字
      {
        name: "",
        type: "pie",

        radius: ["68%", "90%"],

        itemStyle: {
          color: "transparent",
        },

        labelLine: {
          show: false,
          length: 30,
          length2: 55,
        },
        label: {
          position: "inside",
          align: "right",
        },

        data: dataSourceFormat.reduce<any[]>((memo, cur, i) => {
          memo.push({
            ...cur,
            value: 1,
            label: {
              rotate: angleText(i, dataSource.length),
              color: i == activeDataIndex ? "rgba(25, 255, 224)" : undefined,
            },
          });
          return memo;
        }, []),
      },
      // 饼图主体
      {
        type: "pie",
        radius: ["75%", "42%"],
        roseType: "area",
        zlevel: 10,
        itemStyle: {
          color: "#4169E1",
        },
        emphasis: {
          scale: true,

          itemStyle: {
            color: "#6A5ACD",
          },
        },
        label: {
          show: true,
          fontSize: 14,

          color: "#FDFFFF",

          position: "inside",
          rotate: 30,
          align: "right",
          fontWeight: "bold",
          formatter: "{c}%",
        },
        animation: false,
        data: dataSourceFormat.reduce<any[]>((memo, cur, i) => {
          memo.push({
            ...cur,
            value: cur.amount || 0,
            label: {
              ...cur.label,
              rotate: angleText(i, dataSource.length),
              color: i == activeDataIndex ? "#333" : "#fff",
            },
            itemStyle: {
              ...cur.itemStyle,
              color: i == activeDataIndex ? "rgba(25, 255, 224)" : "#4169E1",
            },
            emphasis: {
              itemStyle: {
                color: i == activeDataIndex ? "rgba(25, 255, 224)" : "#6A5ACD",
              },
            },
          });
          return memo;
        }, []),
      },
      // 后面很淡的虚影
      {
        type: "pie",
        // zlevel: 90,
        radius: ["15%", "90%"],
        selectedOffset: 0,
        animation: false,

        label: {
          show: false,
        },
        data: dataSourceFormat.reduce<any[]>((memo, cur, i) => {
          if (i == activeDataIndex) {
            memo.push({
              ...cur,
              value: 1,
              itemStyle: {
                color: "rgba(25, 255, 224,0.05)",
              },
            });
          } else {
            memo.push({
              ...cur,
              value: 1,
              itemStyle: {
                color: "transparent",
              },
            });
          }

          return memo;
        }, []),
      },
    ],
  };
};

const ProjectProportionPieChart = ({
  reactEChartsProps,
  dataSource,
  height = "273px",
}: ProjectProportionPieChartProps) => {
  const [dataIndex, setDataIndex] = useState(0);
  return (
    <ReactECharts
      {...reactEChartsProps}
      style={{
        height: height,
      }}
      option={getProjectProportionPieChartOption({
        dataSource,
        activeDataIndex: dataIndex,
      })}
      onEvents={{
        click: (config: any) => {
          const dataIndex = config.dataIndex;
          setDataIndex(dataIndex);
        },
      }}
    />
  );
};

export default ProjectProportionPieChart;
